﻿<template>
    <div class="l-rblock l-form-viewer" style="padding:8px;">
        <el-form
            :model="formData"
            :rules="rules"
            size="mini"
            labelPosition="right"
            labelWidth="80px"
            ref="form"
            >
            <div class="l-auto-window ">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane class="l-tabs-container" :label="$t('接口信息')" name="tab0">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('api_maintain_f_Code')" :span="24" >
                                    <el-form-item 
                                        :label="$t('接口编码')" 
                                        prop="api_maintain_f_Code"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('api_maintain_f_Code')" :readonly="false" v-model="formData.api_maintain_f_Code" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('api_maintain_f_Name')" :span="24" >
                                    <el-form-item 
                                        :label="$t('接口名称')" 
                                        prop="api_maintain_f_Name"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('api_maintain_f_Name')" v-model="formData.api_maintain_f_Name" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <div>
                                        <el-alert
                                        title="接口地址说明"
                                        type="info"
                                        description="系统接口格式：{learun_api}system/api，{learun_api}为固定参数不可变动。自定义接口格式：http://learun_api/system/api，接口地址请输入完整。"
                                        show-icon
                                        :closable="false"
                                        >
                                        </el-alert>
                                    </div>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('api_maintain_f_Address')" :span="24" >
                                    <el-form-item 
                                        :label="$t('接口地址')" 
                                        prop="api_maintain_f_Address"
                                        style="margin-top: 14px;"
                                        > 
                                        <el-input :disabled="!lr_formEditAuth('api_maintain_f_Address')" v-model="formData.api_maintain_f_Address" :placeholder="$t('请输入')" >
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('api_maintain_f_Type')" :span="12" >
                                    <el-form-item 
                                        :label="$t('接口类别')" 
                                        prop="api_maintain_f_Type"
                                        > 
                                        <l-select 
                                            placeholder="请选择"
                                            :disabled="!lr_formEditAuth('api_maintain_f_Type')"  
                                            :options="TypeOptions" 
                                            v-model="formData.api_maintain_f_Type" 
                                            labelKey="f_Name"
                                            valueKey="f_Name"
                                            />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('api_maintain_f_RequestMethod')" :span="12" >
                                    <el-form-item 
                                        :label="$t('请求方式')" 
                                        prop="api_maintain_f_RequestMethod"
                                        > 
                                        <l-select 
                                            :disabled="!lr_formEditAuth('api_maintain_f_RequestMethod')"  
                                            :options="api_maintain_f_RequestMethodOptions" 
                                            v-model="formData.api_maintain_f_RequestMethod" 
                                            />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('api_maintain_f_EnabledMark')" :span="24" >
                                    <el-form-item 
                                        :label="$t('接口状态')" 
                                        prop="api_maintain_f_EnabledMark"
                                        > 
                                        <el-switch  
                                            :disabled="!lr_formEditAuth('api_maintain_f_EnabledMark')" 
                                            :activeValue="0" 
                                            :inactiveValue="1" 
                                            active-text="启用"
                                            inactive-text="禁用"
                                            active-color="rgba(144, 240, 144, 0.5)"
                                            inactive-color="#C0CCDA"
                                            v-model="formData.api_maintain_f_EnabledMark" 
                                            />
                                    </el-form-item>
                                </el-col>
                                <el-col v-if="lr_formLookAuth('api_maintain_f_Description')" :span="24" >
                                    <el-form-item 
                                        :label="$t('备注')" 
                                        prop="api_maintain_f_Description"
                                        > 
                                        <el-input type="textarea"  :disabled="!lr_formEditAuth('api_maintain_f_Description')" :rows="8" v-model="formData.api_maintain_f_Description" :placeholder="$t('请输入')" />
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane class="l-tabs-container" :label="$t('Query')" name="tab1">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('1658993883252_44280')" :span="24" >
                                    <div class="l-title" >{{$t('Query')}}</div>
                                    <l-edit-table
                                        ref="api_maintain_paramsquery_table"
                                        addBtnText="新增一行"
                                        :isAddBtn="true"
                                        :isRemoveBtn="true"
                                        :isShowNum="true"
                                        :dataSource="api_maintain_paramsquery_data"
                                        :columns="lr_formTableAuth('api_maintain_paramsquery',api_maintain_paramsquery_columns)"
                                        @addRow="handleApi_maintain_paramsqueryAddRow"
                                        @deleteRow="handleApi_maintain_paramsqueryDeleteRow"
                                        >
                                        <template v-slot:f_Name="scope" >
                                            <el-input size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsquery','f_Name')" v-model="scope.row.f_Name" :placeholder="$t('请输入')" >
                                            </el-input>
                                        </template>
                                        <template v-slot:f_Type="scope" >
                                            <l-select :disabled="!lr_formTableEditAuth('api_maintain_paramsquery','f_Type')"  size="mini" :options="api_maintain_paramsquery_f_TypeOptions" v-model="scope.row.f_Type" />
                                        </template>
                                        <template v-slot:f_IsRequired="scope" >
                                            <el-switch size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsquery','f_IsRequired')" :activeValue="1" :inactiveValue="0" v-model="scope.row.f_IsRequired" />
                                        </template>
                                        <template v-slot:f_CaseValue="scope" >
                                            <el-input size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsquery','f_CaseValue')" v-model="scope.row.f_CaseValue" :placeholder="$t('请输入')" >
                                            </el-input>
                                        </template>
                                        <template v-slot:f_Description="scope" >
                                            <el-input size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsquery','f_Description')" v-model="scope.row.f_Description" :placeholder="$t('请输入')" >
                                            </el-input>
                                        </template>
                                    </l-edit-table>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane class="l-tabs-container" :label="$t('Body')" name="tab2" v-if="formData.api_maintain_f_RequestMethod!='GET'&&formData.api_maintain_f_RequestMethod!='DELETE'">
                        <el-col :span="24">
                            <el-form-item label="内容类型" prop="api_maintain_f_BodyType">
                                <l-radio v-model="formData.api_maintain_f_BodyType" 
                                    :options="[{label:'json',value:'json'},{label:'formdata',value:'formdata'}]"
                                    >
                                </l-radio>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if="formData.api_maintain_f_BodyType=='formdata'">
                            <el-row :gutter="0">
                                <div class="l-rblock">
                                    <el-col v-if="lr_formLookAuth('1658993885632_89498')" :span="24" >
                                        <div class="l-title" >{{$t('Body')}}</div>
                                        <l-edit-table
                                            ref="api_maintain_paramsbody_table"
                                            addBtnText="新增一行"
                                            :isAddBtn="true"
                                            :isRemoveBtn="true"
                                            :isShowNum="true"
                                            :dataSource="api_maintain_paramsbody_data"
                                            :columns="lr_formTableAuth('api_maintain_paramsbody',api_maintain_paramsbody_columns)"
                                            @addRow="handleApi_maintain_paramsbodyAddRow"
                                            @deleteRow="handleApi_maintain_paramsbodyDeleteRow"
                                            >
                                            <template v-slot:f_Name="scope" >
                                                <el-input size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsbody','f_Name')" v-model="scope.row.f_Name" :placeholder="$t('请输入')" >
                                                </el-input>
                                            </template>
                                            <template v-slot:f_Type="scope" >
                                                <l-select :disabled="!lr_formTableEditAuth('api_maintain_paramsbody','f_Type')"  size="mini" :options="api_maintain_paramsbody_f_TypeOptions" v-model="scope.row.f_Type" />
                                            </template>
                                            <template v-slot:f_IsRequired="scope" >
                                                <el-switch size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsbody','f_IsRequired')" :activeValue="1" :inactiveValue="0" v-model="scope.row.f_IsRequired" />
                                            </template>
                                            <template v-slot:f_CaseValue="scope" >
                                                <el-input size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsbody','f_CaseValue')" v-model="scope.row.f_CaseValue" :placeholder="$t('请输入')" >
                                                </el-input>
                                            </template>
                                            <template v-slot:f_Description="scope" >
                                                <el-input size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsbody','f_Description')" v-model="scope.row.f_Description" :placeholder="$t('请输入')" >
                                                </el-input>
                                            </template>
                                        </l-edit-table>
                                    </el-col>
                                </div>
                            </el-row>
                        </el-col>
                        <el-col :span="24" v-if="formData.api_maintain_f_BodyType=='json'">
                            <el-input type="textarea" :disabled="!lr_formEditAuth('api_maintain_f_Scheme')" v-model="formData.api_maintain_f_Scheme" :rows="24"></el-input>
                        </el-col>
                    </el-tab-pane>
                    <el-tab-pane class="l-tabs-container" :label="$t('Header')" name="tab3">
                        <el-row :gutter="0">
                            <div class="l-rblock">
                                <el-col v-if="lr_formLookAuth('1658993887188_74438')" :span="24" >
                                    <div class="l-title" >{{$t('Header')}}</div>
                                    <l-edit-table
                                        ref="api_maintain_paramsheader_table"
                                        addBtnText="新增一行"
                                        :isAddBtn="true"
                                        :isRemoveBtn="true"
                                        :isShowNum="true"
                                        :dataSource="api_maintain_paramsheader_data"
                                        :columns="lr_formTableAuth('api_maintain_paramsheader',api_maintain_paramsheader_columns)"
                                        @addRow="handleApi_maintain_paramsheaderAddRow"
                                        @deleteRow="handleApi_maintain_paramsheaderDeleteRow"
                                        >
                                        <template v-slot:f_Name="scope" >
                                            <el-input size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsheader','f_Name')" v-model="scope.row.f_Name" :placeholder="$t('请输入')" >
                                            </el-input>
                                        </template>
                                        <template v-slot:f_Type="scope" >
                                            <l-select :disabled="!lr_formTableEditAuth('api_maintain_paramsheader','f_Type')"  size="mini" :options="api_maintain_paramsheader_f_TypeOptions" v-model="scope.row.f_Type" />
                                        </template>
                                        <template v-slot:f_IsRequired="scope" >
                                            <el-switch size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsheader','f_IsRequired')" :activeValue="1" :inactiveValue="0" v-model="scope.row.f_IsRequired" />
                                        </template>
                                        <template v-slot:f_CaseValue="scope" >
                                            <el-input size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsheader','f_CaseValue')" v-model="scope.row.f_CaseValue" :placeholder="$t('请输入')" >
                                            </el-input>
                                        </template>
                                        <template v-slot:f_Description="scope" >
                                            <el-input size="mini"  :disabled="!lr_formTableEditAuth('api_maintain_paramsheader','f_Description')" v-model="scope.row.f_Description" :placeholder="$t('请输入')" >
                                            </el-input>
                                        </template>
                                    </l-edit-table>
                                </el-col>
                            </div>
                        </el-row>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </el-form>
    </div>
</template>
<script>
const api = window.$api.apimanage.apimaintain
const apiType = window.$api.apimanage.apitype

export default {
    data(){
        return {
            moduleCode: 'apiManage_apimaintain',
            activeName: 'tab0',
            formData: {
                api_maintain_f_Id:"",//主键
                api_maintain_f_Code:"", // 接口编码
                api_maintain_f_Name:"", // 接口名称
                api_maintain_f_Address:"", // 接口地址
                api_maintain_f_Type:"", // 接口类别
                api_maintain_f_RequestMethod:"GET", // 请求方式
                api_maintain_f_EnabledMark:0, // 接口状态
                api_maintain_f_Description:"", // 备注
                api_maintain_f_BodyType:"json", // 内容类型(json,formdata)
                api_maintain_f_Scheme:"", // Josn内容
            },
            rules: {
                api_maintain_f_Code:[
                    { required: true, message: '请输入接口编码' },
                    { validator: this.lr_existDbFiled,
                        fieldName:'f_Code',
                        keyValue:() => { 
                        return this.formData.api_maintain_f_Id },
                        tableName:'api_maintain',
                        keyName:'f_Id',
                        trigger: 'null'}
                ],
                api_maintain_f_Name:[
                    { required: true, message: '请输入接口名称' },
                ],
                api_maintain_f_Address:[
                    { required: true, message: '请输入接口地址' },
                ],
                api_maintain_f_Type:[
                    { required: true, message: '请选择接口类别' },
                ],
                api_maintain_f_RequestMethod:[
                    { required: true, message: '请选择请求方式' },
                ],
                api_maintain_f_EnabledMark:[
                    { required: true, message: '请选择接口状态' },
                ],

            },
            api_maintain_paramsquery_columns:[
                {id:'api_maintain_paramsquery_F_Name',prop:'f_Name',label:'参数名'},
                {id:'api_maintain_paramsquery_F_Type',prop:'f_Type',label:'类型'},
                {id:'api_maintain_paramsquery_F_IsRequired',prop:'f_IsRequired',label:'必填'},
                {id:'api_maintain_paramsquery_F_CaseValue',prop:'f_CaseValue',label:'示例值'},
                {id:'api_maintain_paramsquery_F_Description',prop:'f_Description',label:'备注'},
            ],
            api_maintain_paramsquery_data:[],
            api_maintain_paramsbody_columns:[
                {id:'api_maintain_paramsbody_F_Name',prop:'f_Name',label:'参数名'},
                {id:'api_maintain_paramsbody_F_Type',prop:'f_Type',label:'类型'},
                {id:'api_maintain_paramsbody_F_IsRequired',prop:'f_IsRequired',label:'必填'},
                {id:'api_maintain_paramsbody_F_CaseValue',prop:'f_CaseValue',label:'示例值'},
                {id:'api_maintain_paramsbody_F_Description',prop:'f_Description',label:'备注'},
            ],
            api_maintain_paramsbody_data:[],
            api_maintain_paramsheader_columns:[
                {id:'api_maintain_paramsheader_F_Name',prop:'f_Name',label:'参数名'},
                {id:'api_maintain_paramsheader_F_Type',prop:'f_Type',label:'类型'},
                {id:'api_maintain_paramsheader_F_IsRequired',prop:'f_IsRequired',label:'必填'},
                {id:'api_maintain_paramsheader_F_CaseValue',prop:'f_CaseValue',label:'示例值'},
                {id:'api_maintain_paramsheader_F_Description',prop:'f_Description',label:'备注'},
            ],
            api_maintain_paramsheader_data:[],

            //接口类别下拉框
            TypeOptions:[]

        };
    },
    mounted() {
            this.getTypeList()
            // console.log(this.apiUrl);
    },
    computed: {
        api_maintain_f_RequestMethodOptions(){
            this.lr_loadDataItem('RequestMethod')
            return this.lr_dataItemOptions(this.lr_dataItem['RequestMethod'])
        },
        api_maintain_paramsquery_f_TypeOptions(){
            this.lr_loadDataItem('ParameterType')
            return this.lr_dataItemOptions(this.lr_dataItem['ParameterType'])
        },
        api_maintain_paramsbody_f_TypeOptions(){
            this.lr_loadDataItem('ParameterType')
            return this.lr_dataItemOptions(this.lr_dataItem['ParameterType'])
        },
        api_maintain_paramsheader_f_TypeOptions(){
            this.lr_loadDataItem('ParameterType')
            return this.lr_dataItemOptions(this.lr_dataItem['ParameterType'])
        },

    },
    methods: {
        async getTypeList(){
            let queryData = {}
            queryData.f_PId="0";
            this.TypeOptions=await this.$awaitWraper(apiType.getList(queryData))
        },
        handleApi_maintain_paramsqueryAddRow(){
            let point = {}
            point.f_Name = ""
            point.f_Type = ""
            point.f_IsRequired = "1"
            point.f_CaseValue = ""
            point.f_Description = ""
            this.api_maintain_paramsquery_data.push(point)
        },
        handleApi_maintain_paramsqueryDeleteRow(event){
            this.api_maintain_paramsquery_data.splice(event.index,1)
        },
        handleApi_maintain_paramsbodyAddRow(){
            let point = {}
            point.f_Name = ""
            point.f_Type = ""
            point.f_IsRequired = "1"
            point.f_CaseValue = ""
            point.f_Description = ""
            this.api_maintain_paramsbody_data.push(point)
        },
        handleApi_maintain_paramsbodyDeleteRow(event){
            this.api_maintain_paramsbody_data.splice(event.index,1)
        },
        handleApi_maintain_paramsheaderAddRow(){
            let point = {}
            point.f_Name = ""
            point.f_Type = ""
            point.f_IsRequired = "1"
            point.f_CaseValue = ""
            point.f_Description = ""
            this.api_maintain_paramsheader_data.push(point)
        },
        handleApi_maintain_paramsheaderDeleteRow(event){
            this.api_maintain_paramsheader_data.splice(event.index,1)
        },

        
        // 重置表单
        resetForm() {
            this.$formClear(this.$refs.form)
            this.activeName = 'tab0'
            this.api_maintain_paramsquery_data = []
            this.api_maintain_paramsbody_data = []
            this.api_maintain_paramsheader_data = []

        },
        // 校验表单
        async validateForm() {
            if (!await this.$formValidateWraper(this.$refs.form)) {
                return false  
            }
            if(!this.$refs.api_maintain_paramsquery_table.validate())
            {
                return false
            }
            if(this.formData.api_maintain_f_RequestMethod!="GET"&&this.formData.api_maintain_f_BodyType!="json"){
                if(!this.$refs.api_maintain_paramsbody_table.validate())
                {
                    return false
                }
            }
            if(!this.$refs.api_maintain_paramsheader_table.validate())
            {
                return false
            }

            return true
        },
        // 设置表单数据
        setForm(data) {
            this.$setFormData(this.formData,data.apiMaintainEntity,'api_maintain')
            this.api_maintain_paramsquery_data = data.apiMaintainParamsqueryList
            this.api_maintain_paramsbody_data = data.apiMaintainParamsbodyList
            this.api_maintain_paramsheader_data = data.apiMaintainParamsheaderList

        },
        // 获取表单数据
        getForm() {
            const formData = {}
            formData.apiMaintainEntity = this.$getFormData(this.formData,'api_maintain')
            formData.apiMaintainParamsqueryList = this.api_maintain_paramsquery_data
            formData.apiMaintainParamsbodyList = this.api_maintain_paramsbody_data
            formData.apiMaintainParamsheaderList = this.api_maintain_paramsheader_data
            return formData

        },

        async loadFormData({ keyValue/*,params,node*/ }) {//  keyValue 流程中相当于流程processId,params 传递参数,node 流程节点
            const data = await this.$awaitWraper(api.get(keyValue))
            if (data) {
                this.setForm(data)
                return true
            }
            else {
                return false
            }
        },

        async saveForm({ keyValue, isEdit/*,code,node*/ }) {// isEdit 是否更新数据, keyValue 流程中相当于流程processId,code 表示流程中的操作码,node 流程节点
            const postData = this.getForm()
            if (isEdit) {// 编辑
                return await this.$awaitWraper(api.update(keyValue, postData))
            }
            else {// 新增
                postData.apiMaintainEntity.f_Id = keyValue

                return await this.$awaitWraper(api.add(postData))
            }
        },
    }
}
</script>